<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <title></title>
        <meta name="keywords" content="" />
        <meta name="description" content="" /> 
        <meta name="author" content="js代码(www.jsdaima.com)" />
        <meta name="copyright" content="js代码(www.jsdaima.com)" />
        <link href="css/detail.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
       
        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed">
                <a href="file:///D:/sihuo/app/tuangouList.html" class="aui-navBar-item">
                    <i class="icon icon-return" ></i>
                    <!-- <i class="icon icon-close"></i> -->
                </a>
                <div class="aui-center">
                    <span class="aui-center-title">详情</span>
                </div>
                <a href="javascript:;" class="aui-navBar-item">
                    <!-- <i class="icon icon-share" data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}"></i> -->
                </a>
            </header>
            <section class="aui-scrollView">
                <div class="img_gallery" id="commodity">
                    <div class="main_img">
                        <ul id="bannerList"></ul>
                    </div>
                    <div class="img_font" id='focusList'></div>
                </div>
                <div class="aui-box-gradual">
                    <div class="aui-flex">
                        <div class="aui-time-price">
                            <i>￥</i>
                            <span></span>
                        </div>
                        <div class="aui-flex-box">
                            <h3></h3>
                            <p>
                                <!-- <em class="aui-one">已团7.8k</em> -->
                                <em class="aui-two"></em>
                            </p>
                        </div>
                        <div class="aui-time-box">
                            <p>距结束还剩</p>
                            <div class="time-item">
                                <span class="hour_show">00</span>
                                <em>:</em>
                                <span class="minute_show">00</span>
                                <em>:</em>
                                <span class="second_show">00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h4></h4>
                        <p class="jianjie"></p>
                    </div>
                    <div class="aui-share-box" data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
                        
                    </div>
                </div>
                <div class="aui-news-cox-box">
                    <div class="aui-news-cox aui-flex">
                        <div class="aui-news-cox-red">
                            <img src="images/icon-qmt.png" alt="">
                        </div>
                        <div class="aui-flex-box">新用户和老用户可参团，开团
                        </div>
                    </div>
                </div>
                <div class="divHeight"></div>
               
                <div class="divHeight"></div>
                <div class="aui-page-box" style="padding-bottom: 10px;">
                    <p><img alt=""></p>
                </div>
            </section>
            <footer class="aui-footer aui-footer-fixed">
                <a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active">
                    <span class="aui-tabBar-item-icon">
                        <i class="icon icon-home"></i>
                    </span>
                    <span class="aui-tabBar-item-text">拼团首页</span>
                </a>
                <button class="aui-button-btn">
                    <i>￥</i>
                    <span></span>一键开团
                
                
                </button>
            </footer>
        </section>
    
        <script src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/layer.js"></script>
        <script type="text/javascript" src="js/touchSlider.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                 // 获取商品详情
                var product = JSON.parse(localStorage.getItem('productItem'));
                var banner = product.lunbo.split(',')

                console.log(product)
                console.log(banner)
                //bannerList focusList
                var strBanner = ``,strFocus = ``;
                for(var i = 0;i<banner.length;i++){
                    strBanner += `
                            <li>
                                <img src="${banner[i]}" alt="">
                            </li>
                            `
                    strFocus += `<span>${i+1}/${banner.length}</span>`      
                }
                console.log(strBanner,strFocus)
                $('#bannerList').html(strBanner);
                $('#focusList').html(strFocus)
                $('.aui-time-price span,.aui-button-btn span').text(product.price)
                $('.aui-flex-box h3').text('￥' + product.oldprice)
                $('.aui-flex-box p .aui-two').text(product.groupbuy + '人团')
                $('.aui-flex-box h4').text(product.name)
                $('.aui-flex-box .jianjie').text(product.jianjie)
                $('.aui-page-box p img').prop('src',product.cover)
                $(".main_img").touchSlider({
                    flexible: true,
                    speed: 200,
                    btn_prev: $("#btn_prev"),
                    btn_next: $("#btn_next"),
                    paging: $(".point a"),
                    counter: function(e) {
                        $(".point a").removeClass("on").eq(e.current - 1).addClass("on");
                        $(".img_font span").hide().eq(e.current - 1).show();
                    }
                });

            });
        </script>
        <script type="text/javascript">
            var intDiff = parseInt(32000);
            //倒计时总秒数量
            function timer(intDiff) {
                window.setInterval(function() {
                    var day = 00
                      , hour = 00
                      , minute = 00
                      , second = 00;
                    //时间默认值
                    if (intDiff > 0) {
                        day = Math.floor(intDiff / (60 * 60 * 24));
                        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                    }
                    if (minute <= 9)
                        minute = '0' + minute;
                    if (second <= 9)
                        second = '0' + second;
                    $('.hour_show').html('0<s id="h"></s>' + hour + ' ');
                    $('.minute_show').html('<s></s>' + minute + ' ');
                    $('.second_show').html('<s></s>' + second + ' ');
                    intDiff--;
                }, 1000);
            }
            $(function() {
                timer(intDiff);
                
                
            });
        </script>
    </body>
</html>